<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GoodName安装教程 - IDEA/VSCode/WebStorm插件详细安装指南 | AI编程命名工具安装步骤</title>
  <meta name="description"
    content="详细的GoodName智能命名工具安装教程，包含IDEA、VSCode、WebStorm、PyCharm等IDE平台的插件安装步骤、配置指南和快捷键设置。一步步教你安装AI编程翻译插件。">
  <meta name="keywords"
    content="GoodName安装教程,IDEA插件安装,VSCode插件安装,WebStorm插件安装,PyCharm插件安装,编程命名工具安装,AI翻译插件安装,智能命名插件安装,编程工具安装指南,IDE插件安装步骤,开发工具安装,编程助手安装,命名翻译工具安装,插件市场安装,编程插件教程,开发环境配置,编程工具配置,AI编程助手安装,代码翻译工具安装,程序员工具安装,编程效率工具安装,JetBrains插件安装,Microsoft VSCode扩展安装,编程IDE扩展,开发者工具安装,编程生产力工具,代码命名工具安装">

  <!-- 地理位置和语言 -->
  <meta name="geo.region" content="CN">
  <meta name="geo.country" content="China">
  <meta name="language" content="zh-CN">
  <meta name="robots" content="index, follow">
  <meta name="googlebot" content="index, follow">
  <meta name="author" content="瓜瓜 (Good IT Team)">

  <!-- Open Graph 标签 -->
  <meta property="og:title" content="GoodName安装教程 - 详细插件安装指南">
  <meta property="og:description" content="完整的GoodName智能命名工具安装教程，支持多种IDE平台，一步步指导安装配置">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://goodit.58it.cn/installation.html">
  <meta property="og:image" content="https://goodit.58it.cn/favicon.ico">
  <meta property="og:locale" content="zh_CN">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="GoodName安装教程">
  <meta name="twitter:description" content="详细的智能命名工具安装指南">

  <!-- 结构化数据 -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "HowTo",
    "name": "GoodName智能命名工具安装教程",
    "description": "详细的编程命名工具安装指南",
    "image": "https://goodit.58it.cn/favicon.ico",
    "totalTime": "PT10M",
    "supply": ["IDE软件", "网络连接"],
    "tool": ["IDEA", "VSCode", "WebStorm", "PyCharm"],
    "step": [
      {
        "@type": "HowToStep",
        "name": "打开插件市场",
        "text": "在IDE中打开插件市场或扩展商店"
      },
      {
        "@type": "HowToStep", 
        "name": "搜索插件",
        "text": "搜索GoodName或智能命名工具"
      },
      {
        "@type": "HowToStep",
        "name": "安装插件", 
        "text": "点击安装按钮完成插件安装"
      },
      {
        "@type": "HowToStep",
        "name": "配置使用",
        "text": "重启IDE并完成初始配置"
      }
    ],
    "author": {
      "@type": "Organization",
      "name": "Good IT Team"
    }
  }
  </script>

  <!-- 链接优化 -->
  <link rel="canonical" href="https://goodit.58it.cn/installation.html">
  <link rel="icon" href="/favicon.ico" type="image/x-icon">

  <style>
    :root {
      --primary-color: #4CAF50;
      --secondary-color: #E8F5E8;
      --text-color: #2C3E50;
      --accent-color: #2196F3;
      --warning-color: #FF9800;
      --error-color: #f44336;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
      color: var(--text-color);
      line-height: 1.6;
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      min-height: 100vh;
      padding-top: 70px;
      /* 为导航栏留出空间 */
    }

    /* 导航栏样式 */
    .navbar {
      background: white;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      backdrop-filter: blur(10px);
    }

    .nav-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 70px;
    }

    .nav-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color: var(--primary-color);
      font-size: 1.5em;
      font-weight: bold;
    }

    .nav-logo-icon {
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, #4CAF50, #2196F3);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 18px;
      font-weight: bold;
    }

    .nav-menu {
      display: flex;
      list-style: none;
      gap: 30px;
      align-items: center;
    }

    .nav-link {
      text-decoration: none;
      color: var(--text-color);
      font-weight: 500;
      padding: 8px 16px;
      border-radius: 25px;
      transition: all 0.3s ease;
      position: relative;
    }

    .nav-link:hover,
    .nav-link.active {
      color: var(--primary-color);
      background: var(--secondary-color);
      transform: translateY(-2px);
    }

    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 2px;
      background: var(--primary-color);
      transition: width 0.3s ease;
    }

    .nav-link:hover::after,
    .nav-link.active::after {
      width: 80%;
    }

    /* 移动端菜单 */
    .nav-toggle {
      display: none;
      flex-direction: column;
      cursor: pointer;
      padding: 5px;
    }

    .nav-toggle span {
      width: 25px;
      height: 3px;
      background: var(--primary-color);
      margin: 3px 0;
      transition: 0.3s;
      border-radius: 2px;
    }

    .nav-toggle.active span:nth-child(1) {
      transform: rotate(-45deg) translate(-6px, 6px);
    }

    .nav-toggle.active span:nth-child(2) {
      opacity: 0;
    }

    .nav-toggle.active span:nth-child(3) {
      transform: rotate(45deg) translate(-6px, -6px);
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    .header {
      text-align: center;
      margin: 40px 0;
    }

    .header h1 {
      font-size: 2.5em;
      color: var(--primary-color);
      margin-bottom: 10px;
    }

    .header p {
      font-size: 1.2em;
      color: #666;
    }

    .platform-tabs {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin: 40px 0;
      flex-wrap: wrap;
    }

    .tab-btn {
      padding: 12px 25px;
      background: white;
      border: 2px solid var(--primary-color);
      border-radius: 25px;
      color: var(--primary-color);
      cursor: pointer;
      transition: all 0.3s ease;
      font-weight: 500;
    }

    .tab-btn.active,
    .tab-btn:hover {
      background: var(--primary-color);
      color: white;
      transform: translateY(-2px);
    }

    .platform-content {
      display: none;
      background: white;
      border-radius: 15px;
      padding: 30px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      margin-bottom: 30px;
    }

    .platform-content.active {
      display: block;
    }

    .step-container {
      margin: 30px 0;
    }

    .step {
      margin-bottom: 30px;
      padding: 25px;
      background: var(--secondary-color);
      border-radius: 12px;
      border-left: 5px solid var(--primary-color);
      position: relative;
    }

    .step-number {
      position: absolute;
      top: -10px;
      left: 20px;
      background: var(--primary-color);
      color: white;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
    }

    .step h3 {
      font-size: 1.3em;
      color: var(--primary-color);
      margin-bottom: 15px;
      padding-left: 20px;
    }

    .step p {
      margin-bottom: 10px;
      font-size: 15px;
      line-height: 1.7;
    }

    .step-image {
      text-align: center;
      margin: 20px 0;
    }

    .step-image img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .code-block {
      background: #2d3748;
      color: #e2e8f0;
      padding: 15px;
      border-radius: 8px;
      font-family: 'Consolas', 'Monaco', monospace;
      margin: 15px 0;
      overflow-x: auto;
    }

    .warning-box {
      background: #fff3cd;
      border: 1px solid #ffc107;
      border-radius: 8px;
      padding: 15px;
      margin: 15px 0;
    }

    .warning-box .warning-title {
      color: var(--warning-color);
      font-weight: bold;
      margin-bottom: 8px;
    }

    .success-box {
      background: #d4edda;
      border: 1px solid #4CAF50;
      border-radius: 8px;
      padding: 15px;
      margin: 15px 0;
    }

    .success-box .success-title {
      color: var(--primary-color);
      font-weight: bold;
      margin-bottom: 8px;
    }

    .download-btn {
      display: inline-block;
      padding: 12px 25px;
      background-color: var(--primary-color);
      color: white;
      text-decoration: none;
      border-radius: 25px;
      transition: all 0.3s ease;
      font-weight: 500;
      margin: 10px 5px;
    }

    .download-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
    }

    .back-to-home {
      text-align: center;
      margin: 40px 0;
    }

    .shortcuts-table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0;
    }

    .shortcuts-table th,
    .shortcuts-table td {
      border: 1px solid #ddd;
      padding: 12px;
      text-align: left;
    }

    .shortcuts-table th {
      background: var(--primary-color);
      color: white;
    }

    .shortcuts-table tr:nth-child(even) {
      background: #f9f9f9;
    }

    .keyboard-key {
      background: #f1f1f1;
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 2px 6px;
      font-family: monospace;
      font-size: 0.9em;
    }

    @media (max-width: 768px) {
      .nav-menu {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 70px);
        background: white;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        transition: left 0.3s ease;
        padding-top: 50px;
        gap: 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }

      .nav-menu.active {
        left: 0;
      }

      .nav-toggle {
        display: flex;
      }

      .nav-link {
        font-size: 1.2em;
        padding: 15px 30px;
        width: 80%;
        text-align: center;
      }

      .platform-tabs {
        flex-direction: column;
        align-items: center;
      }

      .tab-btn {
        width: 200px;
        text-align: center;
      }

      .step {
        padding: 20px 15px 20px 35px;
      }
    }
  </style>


  <script>
    var _hmt = _hmt || [];
    (function () {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?0bd1ed112061ea504b7088d32bae5b77";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>

</head>

<body>
  <!-- 导航栏 -->
  <nav class="navbar">
    <div class="nav-container">
      <a href="index.html" class="nav-logo">
        <div class="nav-logo-icon">G</div>
        GoodName
      </a>

      <ul class="nav-menu">
        <li><a href="index.html" class="nav-link">🏠 首页</a></li>
        <li><a href="installation.html" class="nav-link active">📖 安装指南</a></li>
        <li><a href="describe.html" class="nav-link">📋 使用指南</a></li>
        <li><a href="faq.html" class="nav-link">❓ 常见问题</a></li>
        <li><a href="updateRecord.html" class="nav-link">🔄 更新记录</a></li>
      </ul>

      <div class="nav-toggle">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </nav>

  <div class="container">
    <div class="header">
      <h1>📖 GoodName 详细安装教程</h1>
      <p>完整的智能命名工具安装指南，支持多种开发环境和IDE平台</p>
    </div>

    <!-- 平台选择 -->
    <div class="platform-tabs">
      <button class="tab-btn active" onclick="showPlatform('idea')">💡 IDEA 系列</button>
      <button class="tab-btn" onclick="showPlatform('vscode')">⚡ VSCode</button>
      <button class="tab-btn" onclick="showPlatform('settings')">⚙️ 配置说明</button>
      <button class="tab-btn" onclick="showPlatform('shortcuts')">🎯 快捷键</button>
    </div>

    <!-- IDEA 系列安装 -->
    <div class="platform-content active" id="idea">
      <h2>💡 IntelliJ IDEA / WebStorm / PyCharm / Android Studio 安装教程</h2>

      <div class="step-container">
        <div class="step">
          <div class="step-number">1</div>
          <h3>打开JetBrains插件市场</h3>
          <p>在 IDEA 中按 <span class="keyboard-key">Ctrl + Shift + A</span> (Mac: <span class="keyboard-key">Cmd + Shift +
              A</span>) 打开快速搜索</p>
          <p>输入 "Plugins" 或直接访问：<strong>File → Settings → Plugins</strong></p>
          <p>适用于：<strong>IntelliJ IDEA、WebStorm、PyCharm、Android Studio、DataGrip、PhpStorm</strong>等所有JetBrains IDE</p>

          <div class="warning-box">
            <div class="warning-title">⚠️ 注意事项</div>
            <p>确保选择 "Marketplace" 标签页，而不是 "Installed" 标签页</p>
            <p>需要确保IDE版本支持插件安装（建议使用2020.1及以上版本）</p>
          </div>
        </div>

        <div class="step">
          <div class="step-number">2</div>
          <h3>搜索GoodName智能命名插件</h3>
          <p>在插件市场搜索框中输入：<code class="code-block">GoodName</code></p>
          <p>也可以搜索：<code class="code-block">智能命名</code> / <code class="code-block">AI翻译</code> / <code
              class="code-block">编程命名</code></p>

          <div class="success-box">
            <div class="success-title">✅ 插件识别提示</div>
            <p>插件作者：瓜瓜 (Good IT Team)</p>
            <p>插件描述包含：GoodName is a free AI-powered translation tool for programming...</p>
            <p>插件图标：绿色圆形渐变图标，带有"G"字母</p>
          </div>
        </div>

        <div class="step">
          <div class="step-number">3</div>
          <h3>一键安装编程命名插件</h3>
          <p>找到 GoodName 插件后，点击 <strong>"Install"</strong> 按钮</p>
          <p>等待下载完成（插件大小约2-5MB），然后点击 <strong>"Restart IDE"</strong></p>

          <div class="warning-box">
            <div class="warning-title">⚠️ 重要提醒</div>
            <p>JetBrains系列IDE必须重启才能激活插件功能</p>
            <p>重启过程中请保存当前工作内容</p>
          </div>
        </div>

        <div class="step">
          <div class="step-number">4</div>
          <h3>验证安装成功</h3>
          <p>重启IDE后，检查插件是否正确安装：</p>
          <ul style="margin-left: 20px;">
            <li>工具栏菜单应显示 <strong>Tools → GoodName</strong> 相关选项</li>
            <li>右键菜单中应有 <strong>"GoodName翻译"</strong> 选项</li>
            <li>快捷键 <span class="keyboard-key">Ctrl + Alt + Shift + 1</span> 应可正常响应</li>
            <li>在 <strong>File → Settings → Tools</strong> 中应能找到 GoodName 配置项</li>
          </ul>
        </div>
      </div>

      <div class="success-box">
        <div class="success-title">🎉 JetBrains系列安装完成</div>
        <p>现在可以开始使用 GoodName 进行智能编程命名翻译了！</p>
        <p>支持所有JetBrains系列IDE：IDEA、WebStorm、PyCharm、Android Studio等</p>
      </div>
    </div>

    <!-- VSCode 安装 -->
    <div class="platform-content" id="vscode">
      <h2>⚡ Visual Studio Code 扩展安装教程</h2>

      <div class="step-container">
        <div class="step">
          <div class="step-number">1</div>
          <h3>打开VSCode扩展市场</h3>
          <p>按 <span class="keyboard-key">Ctrl + Shift + X</span> (Mac: <span class="keyboard-key">Cmd + Shift +
              X</span>) 打开扩展面板</p>
          <p>或点击左侧边栏的扩展图标 📦 (Extensions)</p>
          <p>也可通过菜单：<strong>View → Extensions</strong></p>
        </div>

        <div class="step">
          <div class="step-number">2</div>
          <h3>搜索GoodName扩展</h3>
          <p>在搜索框中输入：<code class="code-block">GoodName</code></p>
          <p>查找由 <strong>"瓜瓜 (Good IT Team)"</strong> 开发的扩展</p>
          <p>扩展名称：<strong>GoodName - 智能编程命名翻译工具</strong></p>
        </div>

        <div class="step">
          <div class="step-number">3</div>
          <h3>安装VSCode扩展</h3>
          <p>点击扩展详情页的 <strong>"Install"</strong> 按钮进行安装</p>
          <p>VSCode 扩展通常无需重启即可使用，安装完成后立即生效</p>
          <p>安装过程中会自动下载依赖项</p>
        </div>

        <div class="step">
          <div class="step-number">4</div>
          <h3>验证VSCode扩展安装</h3>
          <p>检查扩展是否正确安装：</p>
          <ul style="margin-left: 20px;">
            <li>按 <span class="keyboard-key">Ctrl + Shift + P</span> 打开命令面板，应能搜索到 GoodName 相关命令</li>
            <li>右键菜单中应有翻译相关选项</li>
            <li>快捷键应可正常使用</li>
            <li>状态栏可能显示 GoodName 相关信息</li>
          </ul>
        </div>
      </div>

      <div class="warning-box">
        <div class="warning-title">⚠️ VSCode 版本兼容性</div>
        <p>建议使用 VSCode 1.60.0 或更高版本以确保最佳兼容性</p>
        <p>如遇到问题，请尝试更新VSCode到最新版本</p>
      </div>
    </div>

    <!-- 配置说明 -->
    <div class="platform-content" id="settings">
      <h2>⚙️ 详细配置说明与翻译模式选择</h2>

      <div class="step-container">
        <div class="step">
          <div class="step-number">1</div>
          <h3>首次配置向导</h3>
          <p>首次使用时，插件会自动弹出智能配置向导</p>
          <p>如果未自动弹出配置，使用翻译功能时会提示进行配置</p>
          <p>配置向导会引导您选择最适合的翻译模式</p>
        </div>

        <div class="step">
          <div class="step-number">2</div>
          <h3>翻译方式对比与选择</h3>
          <p><strong>本地翻译模式：</strong>完全离线运行，无需网络连接，但翻译准确度相对较低</p>
          <p><strong>AI 翻译模式：</strong>需要配置 AI 模型接口，翻译准确度高，支持上下文理解</p>

          <div class="success-box">
            <div class="success-title">🆓 推荐免费AI模型</div>
            <p>推荐使用：<strong>Qwen/Qwen2.5-7B-Instruct</strong></p>
            <p>完全免费且效果优秀，适合大多数编程命名场景</p>
            <p>也支持：ChatGPT、Claude、Gemini等主流AI模型</p>
          </div>
        </div>

        <div class="step">
          <div class="step-number">3</div>
          <h3>AI 模型详细配置</h3>
          <p>如选择 AI 翻译模式，需要配置以下参数：</p>
          <ul style="margin-left: 20px;">
            <li><strong>API 地址：</strong>支持所有 OpenAI 兼容的接口</li>
            <li><strong>API 密钥：</strong>用于身份验证和调用授权</li>
            <li><strong>模型名称：</strong>具体的AI模型标识符</li>
          </ul>

          <div class="code-snippet">
            # 常用免费 API 配置示例
            API 地址: https://api.siliconflow.cn/v1/chat/completions
            模型名称: Qwen/Qwen2.5-7B-Instruct
            API 密钥: sk-xxxxxxxxxxxxxxxx (在对应平台申请)

            # 其他支持的API服务
            OpenAI: https://api.openai.com/v1/chat/completions
            Anthropic: https://api.anthropic.com/v1/messages
            Google: https://generativelanguage.googleapis.com/v1beta/models
          </div>
        </div>

        <div class="step">
          <div class="step-number">4</div>
          <h3>访问插件设置页面</h3>
          <p><strong>IDEA 系列：</strong>File → Settings → Tools → GoodName</p>
          <p><strong>VSCode：</strong>文件 → 首选项 → 设置，搜索 "GoodName"</p>
          <p>或使用菜单快捷方式：Tools → GoodName → 打开设置</p>
          <p>也可以通过命令面板快速访问设置</p>
        </div>
      </div>
    </div>

    <!-- 快捷键说明 -->
    <div class="platform-content" id="shortcuts">
      <h2>🎯 快捷键配置与使用说明</h2>

      <div class="step-container">
        <div class="step">
          <div class="step-number">1</div>
          <h3>默认快捷键配置</h3>

          <table class="shortcuts-table">
            <thead>
              <tr>
                <th>操作系统</th>
                <th>快捷键组合</th>
                <th>功能说明</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Windows/Linux</td>
                <td><span class="keyboard-key">Ctrl + Alt + Shift + 1</span></td>
                <td>翻译选中文本为驼峰命名格式</td>
              </tr>
              <tr>
                <td>macOS</td>
                <td><span class="keyboard-key">Cmd + Alt + Shift + 1</span></td>
                <td>翻译选中文本为驼峰命名格式</td>
              </tr>
              <tr>
                <td>通用</td>
                <td>右键菜单</td>
                <td>选中文本后右键访问翻译选项</td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="step">
          <div class="step-number">2</div>
          <h3>智能翻译使用方法</h3>
          <p>1. 在代码编辑器中选中需要翻译的中文文本或描述</p>
          <p>2. 按下对应操作系统的快捷键组合</p>
          <p>3. 在弹出的格式选择框中选择所需的命名格式</p>
          <p>4. 原文本将被自动替换为翻译后的英文命名</p>

          <div class="success-box">
            <div class="success-title">💡 使用小技巧</div>
            <p>如果没有选中任何文本，插件会弹出输入框提示你输入要翻译的内容</p>
            <p>支持批量翻译：选中多行文本，每行都会独立翻译</p>
          </div>
        </div>

        <div class="step">
          <div class="step-number">3</div>
          <h3>支持的编程命名格式</h3>
          <ul style="margin-left: 20px; margin-top: 10px;">
            <li><strong>驼峰命名 (camelCase)：</strong>getUserList - 适用于变量名、方法名</li>
            <li><strong>蛇形命名 (snake_case)：</strong>get_user_list - 适用于Python、数据库字段</li>
            <li><strong>帕斯卡命名 (PascalCase)：</strong>GetUserList - 适用于类名、接口名</li>
            <li><strong>常量命名 (CONSTANT_CASE)：</strong>GET_USER_LIST - 适用于常量定义</li>
            <li><strong>短横线命名 (kebab-case)：</strong>get-user-list - 适用于CSS类名、文件名</li>
            <li><strong>点分命名 (dot.case)：</strong>get.user.list - 适用于配置文件键名</li>
          </ul>
        </div>

        <div class="step">
          <div class="step-number">4</div>
          <h3>自定义快捷键设置</h3>
          <p><strong>IDEA：</strong>File → Settings → Keymap，搜索 "GoodName" 进行自定义</p>
          <p><strong>VSCode：</strong>文件 → 首选项 → 键盘快捷方式，搜索 "GoodName" 进行自定义</p>
          <p>建议选择不与其他插件冲突的快捷键组合</p>
        </div>
      </div>
    </div>

    <!-- 返回首页 -->
    <div class="back-to-home">
      <a href="index.html" class="download-btn">🏠 返回首页</a>
      <a href="describe.html" class="download-btn">📖 使用指南</a>
      <a href="faq.html" class="download-btn">❓ 常见问题</a>
    </div>
  </div>

  <script>
    // 导航栏移动端菜单切换
    const navToggle = document.querySelector('.nav-toggle');
    const navMenu = document.querySelector('.nav-menu');

    navToggle.addEventListener('click', function () {
      navToggle.classList.toggle('active');
      navMenu.classList.toggle('active');
    });

    // 点击菜单项时关闭移动端菜单
    document.querySelectorAll('.nav-link').forEach(link => {
      link.addEventListener('click', () => {
        navToggle.classList.remove('active');
        navMenu.classList.remove('active');
      });
    });

    // 滚动时改变导航栏样式
    window.addEventListener('scroll', function () {
      const navbar = document.querySelector('.navbar');
      if (window.scrollY > 50) {
        navbar.style.background = 'rgba(255, 255, 255, 0.95)';
      } else {
        navbar.style.background = 'white';
      }
    });

    function showPlatform(platform) {
      // 隐藏所有内容
      const contents = document.querySelectorAll('.platform-content');
      contents.forEach(content => content.classList.remove('active'));

      // 移除所有按钮的active状态
      const buttons = document.querySelectorAll('.tab-btn');
      buttons.forEach(btn => btn.classList.remove('active'));

      // 显示选中的内容
      document.getElementById(platform).classList.add('active');

      // 激活对应的按钮
      event.target.classList.add('active');
    }

    // 页面加载完成后的处理
    document.addEventListener('DOMContentLoaded', function () {
      // 添加一些交互效果
      const steps = document.querySelectorAll('.step');
      steps.forEach((step, index) => {
        step.style.animationDelay = `${index * 0.1}s`;
      });
    });
  </script>
</body>

</html>